<template>
  <div class="default-layout">
    <LeftNavbar />
    <div class="main-content">
      <main class="layout-content">
        <router-view v-slot="{ Component, route }">
          <keep-alive :include="['HomePage', 'product', 'Profile', 'search', 'ContestDetail']">
            <component :is="Component" :key="route.name" />
          </keep-alive>
        </router-view>
      </main>
      <!-- <Footer /> -->
    </div>
  </div>
</template>

<script setup lang="ts">
  import LeftNavbar from '@/components/LeftNavbar.vue';
  // import Footer from '@/components/Footer.vue'
</script>

<style lang="scss" scoped>
  @use '@/styles/variables' as *;

  .default-layout {
    min-height: 100vh;
    background: $primary-bg-color;
    display: flex;
  }

  .main-content {
    // flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 184px; // 为左侧导航栏留出空间
  }

  .layout-content {
    width: 100%;
  }
</style>
